<template>
  <div class="note">
    <div class="note_all">
      <div class="note_top">
        <div class="note_back" @click="back"></div>
      </div>
      <div class="welcome">
        你好<br />
        欢迎来到寻匠之美
      </div>
      <div class="phone">
        <input
          type="text"
          v-model.trim="phone"
          oninput="value=value.replace(/[^\d]/g,'')"
          v-on:input="canon"
          class="reg_inp"
          maxlength="11"
          placeholder="请输入手机号"
        />
      </div>
      <div class="verify">
        <input
          type="text"
          v-model.trim="verify"
          class="reg_inp"
          v-on:input="canon"
          placeholder="请输入验证码"
          maxlength="6"
          ref="inputs"
        />
        <div class="verify_div">
          <input
            type="button"
            class="verify_btn"
            :value="btntxt"
            :disabled="!disabled"
            @click="getCode"
          />
        </div>
      </div>
      <div class="reg_div">
        <input
          type="button"
          :class="rule ? 'reg_true' : 'reg_btn'"
          value="登录"
          :disabled="!rule"
          @click="login"
        />
      </div>
      <div class="loginPass" @click="back">密码登录</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Note",
  data() {
    return {
      btntxt: "获取验证码",
      disabled: false,
      phone: "",
      verify: "",
      rule: false,
      time: 0,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    login() {
      var that = this;
      that.$axios
        .post("/v1/common/login", {
          mobile: that.phone,
          code: that.verify,
          login_type: 2,
        })
        .then(
          (res) => {
            var result = res.data;
            if (result.code == 200) {
              var token = result.data.token;
              localStorage.setItem("token", token);
              //  this.$router.push({path:'/center'});
              setTimeout(function () {
                that.$router.go(-2);
              }, 500);
            } else {
              Toast(result.msg);
            }
          },
          (res) => {
            console.log("error");
          }
        );
    },
    canon() {
      if (this.phone.length == 11) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
      if (this.phone.length == 11 && this.verify.length > 0) {
        this.rule = true;
      } else {
        this.rule = false;
      }
    },
    //获取验证码
    getCode() {
      this.$axios
        .post("/v1/common/sendCode", {
          mobile: this.phone,
          type: 4,
        })
        .then(
          (res) => {
            var result = res.data;
            if (result.code == 200) {
              Toast("验证码发送成功，请在手机端查收");
              this.time = 60;
              this.timer();
              this.$refs.inputs.focus();
            } else {
              Toast(result.msg);
            }
          },
          (res) => {
            console.log("error");
          }
        );
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        this.disabled = false;
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        if (this.phone.length == 11) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      }
    },
  },
};
</script>
<style scoped>
.note {
  width: 100%;
  position: fixed;
  height: 100%;
}
.note_all {
  width: 698px;
  margin: 0 auto;
}
.note_top {
  margin-top: 30px;
}
.note_back {
  width: 48px;
  height: 48px;
  background: url("/static/images/team_go_back.png") no-repeat center center;
  background-size: 100% 100%;
}
.welcome {
  font-size: 52px;
  color: #333333;
  font-weight: bold;
  margin-top: 56px;
  margin-bottom: 60px;
}
.reg_inp {
  border: none;
  width: 100%;
  height: 104px;
  border-bottom: 2px solid #ececec;
  font-size: 32px;
}
.verify {
  position: relative;
}
.verify_btn {
  background: #fff;
  padding: 12px 8px;
  border: 2px solid #4a4a4a;
  font-size: 24px;
  color: #000000;
  text-align: center;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 26px;
  cursor: pointer;
  outline: 0px;
  -webkit-appearance: none;
}
.reg_btn {
  width: 100%;
  height: 98px;
  line-height: 100px;
  border-radius: 50px;
  text-align: center;
  font-size: 32px;
  color: #4a4a4a;
  background: #ececec;
  margin-top: 70px;
  cursor: pointer;
  outline: 0px;
  -webkit-appearance: none;
  border: none;
}
.reg_true {
  width: 100%;
  height: 98px;
  line-height: 100px;
  border-radius: 50px;
  text-align: center;
  font-size: 32px;
  color: #333334;
  background: #ffe514;
  margin-top: 70px;
  cursor: pointer;
  outline: 0px;
  -webkit-appearance: none;
  border: none;
}
.loginPass {
  font-size: 28px;
  color: #9b9b9b;
  text-align: center;
  margin-top: 52px;
}
a {
  text-decoration: none;
}
</style>